<template>
  <div style="margin-top: 0;">
    <el-menu
      :default-active="router_page"
      mode="horizontal"
      @select="handleSelect"
      active-text-color="green"
      background-color="#409EFF"
      text-color="#fff"
      router
    >
      <el-menu-item>
        <div class="el-icon-s-unfold" style="color: white"></div>
      </el-menu-item>
      <el-menu-item disabled index="icon"
                    style="color: white!important;cursor: pointer!important;opacity: 1!important;font-size: x-large">
        <div @click="backToMain">
          G21 线上课程教学平台
        </div>
      </el-menu-item>

    </el-menu>
    <el-drawer
      direction="ltr"
      :visible.sync="drawer"
      :show-close="false"
      :wrapper-closable="true"
      :with-header="false"
    >
      <el-menu
        :default-active="router_page"
        mode="vertical"
        @select="handleSelect"
        active-text-color="#409EFF"

        router
      >

        <el-menu-item index="/">主页面</el-menu-item>
        <el-menu-item index="/Guest"
                      v-if="(curRole==='guest'||curRole==='test')">
          访客页面
        </el-menu-item>
        <el-menu-item index="/Student"
                      v-if="(curRole==='student'||curRole==='test')">校内学生页面
        </el-menu-item>
        <el-menu-item index="/Teacher"
                      v-if="(curRole==='teacher'||curRole==='test')">教师页面
        </el-menu-item>
        <el-menu-item index="/TA"
                      v-if="(isTA||curRole==='test')">助教页面
        </el-menu-item>
        <el-menu-item index="/admin"
                      v-if="(curRole==='admin'||curRole==='test')">管理员页面
        </el-menu-item>
      </el-menu>
    </el-drawer>
  </div>
</template>

<script>
import state from '../store/index'
import axios from 'axios'

export default {
  computed: {
    curRole() {
      return state.getters.getRole
    },
    isTA() {
      return state.getters.isTA
    }
  },
  name: "Navbar",
  data() {
    return {
      router_page: '/',
      drawer: false,
    }
  },
  methods: {

    handleSelect(key, keyPath) {

      if (key == null) {
        this.drawer = !this.drawer
      } else {
        this.drawer = false
      }
    },
    backToMain() {
      if (this.$router.currentRoute.name !== 'Main') {
        this.$router.push('/')
      }
    }
  }
}
</script>

<style scoped>
</style>
